<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>canvas hello world</title>
<style>
</style>
</head>
<body>
<canvas id="canvas" width="600" height="400">  
	<p>Your browserdoes not support the canvas element!</p>  
</canvas>


<script>
window.onload = function() {
	draw();
	draw2();
	draw3();
};

function draw() {  
	var ctx = document.getElementById('canvas').getContext('2d');  
	for (var i=0;i<6;i++){  
		for (var j=0;j<6;j++){  
		ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +   
						Math.floor(255-42.5*j) + ',0)';  
		ctx.fillRect(j*25,i*25,25,25);  
		}  
	}  
}

function draw2() {  
    var ctx = document.getElementById('canvas').getContext('2d');  
	ctx.save();
	ctx.translate(160, 0);
	
    for (var i=0;i<6;i++){  
		for (var j=0;j<6;j++){  
			ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +   
                         Math.floor(255-42.5*j) + ')';  
			ctx.beginPath();
			ctx.arc(12.5+j*25, 12.5+i*25, 10, 0, Math.PI*2, true);
			ctx.stroke();
		}
    }
	ctx.restore();
}
 
 function draw3() {
	var ctx = document.getElementById('canvas').getContext('2d');  
	ctx.save();
	ctx.translate(320, 0);
	
	// draw background  
	ctx.fillStyle = '#FD0';  
	ctx.fillRect(0,0,75,75);  
	ctx.fillStyle = '#6C0';  
	ctx.fillRect(75,0,75,75);  
	ctx.fillStyle = '#09F';  
	ctx.fillRect(0,75,75,75);  
	ctx.fillStyle = '#F30';  
	ctx.fillRect(75,75,75,75);  
	ctx.fillStyle = '#FFF';  
	
	// set transparency value  
	ctx.globalAlpha = 0.2;  
  
	// Draw semi transparent circles  
	for (var i=0; i<7; i++){  
		ctx.beginPath();  
		ctx.arc(75, 75, 10+10*i, 0, Math.PI*2, true);  
		ctx.fill();  
	}

	ctx.restore();
}  

</script>
</body>
</html>